import { ThemeStylesOptions } from "@/types";
import { defineComponent, ref, SetupContext, PropType, toRefs } from "vue";
import { useRouter } from 'vue-router'
import styles from "../index.module.less";
import { ThemeSelectorExposed, ThemeSelector } from './ThemeSelector';
import { ElButton, ElInput } from "element-plus";

interface HeaderProps {
  /** 
   * 主题样式 
   * @default ''
   */
  styleTheme: ThemeStylesOptions;
  name: string;
  onExportPDF(): void;
  onChangeStyleTheme(theme: string): void;
  resumeNameOnChange(value: HeaderProps['name']): void
  onSave(): void;
}

const props = {
  /** 主题样式 */
  styleTheme: {
    type: String as PropType<HeaderProps['styleTheme']>,
    default: ''
  },
  /** 打印PDF回调函数 */
  onExportPDF: {
    type: Function as PropType<HeaderProps['onExportPDF']>
  },
  /** 切换主题回调函数 */
  onChangeStyleTheme: {
    type: Function as PropType<HeaderProps['onChangeStyleTheme']>,
  },
  /**
   * 简历名字
   */
  resumeName: {
    type: String as PropType<HeaderProps['name']>,
    default: ''
  },
  resumeNameOnChange: {
    type: Function as PropType<HeaderProps['resumeNameOnChange']>,
  },

  onSave: {
    type: Function as PropType<HeaderProps['onSave']>,
  }
}

export const Header = defineComponent({
  props,
  setup(props) {
    const { onExportPDF, onChangeStyleTheme, resumeNameOnChange, onSave } = props
    const { resumeName } = toRefs(props)
    const ThemeSelectorRef = ref<ThemeSelectorExposed>()
    const router = useRouter()

    const backClick = () => {
      router.back()
    }

    const save = () => {
      onSave?.()
    }

    return () => (
      <>
        <ThemeSelector
          ref={ThemeSelectorRef}
          styleTheme={props.styleTheme}
          onChangeStyleTheme={onChangeStyleTheme}
        />
        <header class={styles.header}>
          <div class={styles.left}>
            <div class={styles.backIcon} onClick={backClick}>
              <el-icon>
                <arrow-left />
              </el-icon>
            </div>
            <ElInput
              modelValue={resumeName.value}
              onInput={resumeNameOnChange}
              placeholder="简历名称"
              style={{ maxWidth: "200px" }}
            />
            <nav>
              <span>首页</span>
              {/* <span>编辑模式</span> */}
              <span onClick={() => ThemeSelectorRef.value?.show()}>
                选择主题
              </span>
              {/* <span>插件列表</span> */}
              {/* <span>图标列表</span> */}
            </nav>
          </div>
          <div class={styles.right}>
            <ElButton onClick={save}>保存</ElButton>
            <ElButton type="primary" onClick={() => onExportPDF?.()}>导出</ElButton>
          </div>
        </header>
      </>
    )
  }
})

